<template>
  <z-dropdown v-model:visible="visible">
    <a class="ant-dropdown-link" @click.prevent>
      Hover me
      <DownOutlined />
    </a>
    <template #overlay>
      <z-menu @click="handleMenuClick">
        <z-menu-item keyVal="1">Clicking me will not close the menu.</z-menu-item>
        <z-menu-item keyVal="2">Clicking me will not close the menu also.</z-menu-item>
        <z-menu-item keyVal="3">Clicking me will close the menu</z-menu-item>
      </z-menu>
    </template>
  </z-dropdown>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    let visible = ref(false)
    const handleMenuClick = e => {
      if (e.key === '3') {
        visible.value = false
      }
    }
    return {
      visible,
      handleMenuClick
    }
  }
})
</script>
